<template >
<h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td>照片:</td>
      <td><img :src="User.imgUrl" width="100"></td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{User.name}}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{User.age}}</td>
    </tr>
    <tr>
      <td>朋友:</td>
      <td>
        <ul>
          <li v-for="fName in User.fridends">{{fName}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="load()" >加载数据</button>
</template>

<script setup>
  import {ref} from "vue";

  const User = ref({
    name:'',
    age:'',
    imgUrl:'',
    fridends:[]
  });

  const load = ()=>{
    //给person对象的所有属性赋值
    //图片在public文件夹下,可通过文件名直接找到该图片
    User.value = {
      name:'范传奇',
      age:'20',
      imgUrl:'fcq.jpg',
      fridends:['路飞','索隆','娜美']
    };
  }

</script>

<style scoped>

</style>